<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <script type="text/javascript" src="{% static 'js/slider.js' %}"></script>
    {#    通过js引入另一个顶部导航栏#}
    <script type="text/javascript" src="{% static 'js/top.js' %}" ></script>
    <title>曦雨实验一</title>
</head>
<body>
<h1 class="titlebar">天际购--肯定有你想要的！</h1>
<div class="banner" id="banner">
    <div class="category" id="category">
        <ul>
            {% for cat in category %}
                <li>
                    <div class="title">{{ cat.title }}</div>
                    <div class="children">
                        {% for child in cat.children %}
                            <div class="row">
                                <div class="left"><span>{{ child.title }}</span> <span>&gt;</span></div>
                                <div class="right">
                                    {% for children in child.children %}
                                        <span>&nbsp &nbsp{{ children.title }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
    <div id="slider">
        <ul class="slieder-item-container" id="slider-container">
            <li><a href="#">
                <img src="../static/up;oad/category/醒目飞鹰.png"
                     alt=""/></a>
            </li>
            <li><a href="#"><img src="../static/up;oad/category/tb_image_share_1683184731437.jpg"
                                 alt=""/></a></li>
            <li><a href="#"><img src="../static/up;oad/category/tb_image_share_1683184715080.jpg"
                                 alt=""/></a></li>
            <li><a href="#"><img src="../static/up;oad/category/tb_image_share_1683184851798.jpg"
                                 alt=""/></a></li>
            <li><a href="#"><img src="../static/up;oad/category/tb_image_share_1683184776707.jpg"
                                 alt=""/></a></li>
        </ul>
        <div class="arrow-container">
            <span class="left-arrow" id="left-arrow"><</span>
            <span class="right-arrow" id="right-arrow">></span>
        </div>
        <div class="indicator-container" id="indicator-container">
            <span class="indicator active"></span>
            <span class="indicator"></span>
            <span class="indicator"></span>
            <span class="indicator"></span>
            <span class="indicator"></span>
        </div>
    </div>
</div>
<div class="detail">
    {% autoescape off %}
        <h3>这里是富文本哦</h3>
        {% for good1 in category %}
            {{ good1.detail }}
        {% endfor %}
    {% endautoescape %}
</div>
</body>
<style>
    .detail {
        {#background-color: #46e7ff;#}
        width: 1000px;
        margin: auto;
        padding: 20px 0;
    }

    .titlebar {
        width: 500px;
        height: 50px;
        margin-top: -150px;
        left: 50%;
        transform: translate(-40%, 0);
        position: absolute;
    }

    .banner {
        display: flex;
        width: 1000px;
        margin: 250px auto;
        position: relative;
        box-sizing: border-box;
    }

    .banner .category {
        width: 250px;
        height: 300px;
        background-color: rgba(0, 0, 202, 0.02);
        padding: 10px 0;
        box-sizing: border-box;
    }

    .banner .category ul {
        margin: 0;
        list-style-type: none;
        padding: 0;
    }

    .banner .category ul li {
        padding: 0 10px;
    }

    .banner .category ul li:hover .children {
        display: block;
    }

    .banner .category ul li .title:hover {
        background-color: rgba(0, 0, 0, 0.6);
    }

    .banner .category:hover #slider {
        display: none;
        background-color: aqua;
    }

    .banner .category ul li .children {
        width: 750px;
        height: 100%;
        position: absolute;
        left: 250px;
        top: 0;
        z-index: 999;
        display: none;
        padding: 10px;
        box-sizing: border-box;
    }

    .banner .category ul li .children .row {
        display: flex;
    }

    .banner .category ul li .children .row .left {
        width: 200px;
        text-align: right;
        font-weight: 900;
    {#background: red;#}
    }

    .banner .category ul li .children .row .left span:last-of-type {
        margin-left: 20px;
    }

    .banner .category ul li .children .row .right {
        padding: 0 20px;
        box-sizing: border-box;
    {#background: green;#}
    }

    #slider, ul, a {
        width: 100%;
        height: 400px;
    }

    #slider {
        width: 300px;
        height: 100%;
        position: absolute;
    {#border: 2px solid black;#}
        /*padding: 3px;*/
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        right: 0;
        display: block;
        box-sizing: border-box;
        z-index: 1;
    }

    #slider ul {
        position: absolute;
        list-style-type: none;
        width: 6000px;
        margin: 0;
        padding: 0;
        /*transition-duration: 0.3s;*/
    }

    #slider li {
        float: left;
        width: 300px;

    }

    #slider a {

        display: inline-block;
        height: 300px;
    }

    #slider img {
        width: 300px;
        height: 100%;
    }

    #slider:hover .arrow-container {
        display: block;
    }

    .arrow-container {
        position: absolute;
        width: 100%;
        height: 50px;
        top: 50%;
        margin-top: -25px;
        display: none;
    }

    .arrow-container span {
        position: absolute;
        width: 30px;
        height: 30px;
        font-size: 30px;
        /*display: inline-block;*/
        text-align: center;
        line-height: 25px;
        background: rgba(0, 0, 0, 0.2);
        color: white;
    }

    .left-arrow {
        left: 0;
        cursor: pointer;
    }

    .right-arrow {
        right: 0;
        cursor: pointer;
    }

    .indicator-container {
        position: absolute;
        width: 150px;
        height: 30px;
        line-height: 30px;
        bottom: 0;
        left: 50%;
        margin-left: -75px;
        text-align: center;
    }

    .indicator {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background: white;
        cursor: pointer;
    }

    .indicator.active {
        background: red;
    }
</style>

{#自己写的#}
{#<script>#}
{#    let index = 0;#}
{#    slider_container = document.getElementById("slider-container");#}
{#    left_arrow = document.getElementById("left-arrow");#}
{#    right_arrow = document.getElementById("right-arrow");#}
{#    left_arrow.addEventListener("click", () => {#}
{#        index <= 0 ? index = 350*4 : index -= 350;#}
{#        slider_container.style.transform="translateX(-"+index+"px)";#}
{#    })#}
{#    right_arrow.addEventListener("click", () => {#}
{#        index > 350*4 ? index = 0 : index += 350;#}
{#        slider_container.style.transform="translateX(-"+index+"px)";#}
{#    })#}
{##}
{#</script>#}
</html>